<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="智慧医院平台" fixed placeholder :border="false" class="custom-nav">
      <template #right>
        <van-icon name="ellipsis" size="20" />
        <van-icon name="question-o" size="20" style="margin-left: 12px" />
      </template>
    </van-nav-bar>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 顶部横幅 -->
      <div class="banner">
        <div class="banner-content">
          <div class="banner-text">
            <h2>健康生活</h2>
            <h2>轻松简单</h2>
          </div>
          <div class="banner-image">
            <van-icon name="user-circle-o" size="80" color="#fff" />
          </div>
        </div>
      </div>

      <!-- 快捷服务 -->
      <div class="quick-services">
        <div class="service-item" @click="goToRegister">
          <van-icon name="calendar-o" size="24" color="#fff" />
          <div class="service-text">
            <div class="service-title">门诊挂号</div>
            <div class="service-desc">便捷预约挂号</div>
          </div>
        </div>
        <div class="service-item payment" @click="goToPayment">
          <van-icon name="gold-coin-o" size="24" color="#fff" />
          <div class="service-text">
            <div class="service-title">门诊缴费</div>
            <div class="service-desc">便捷预约挂号</div>
          </div>
        </div>
      </div>

      <!-- 公告栏 -->
      <div class="notice">
        <van-icon name="volume-o" size="16" color="#666" />
        <van-swipe :autoplay="3000" :show-indicators="false" vertical class="notice-swipe">
          <van-swipe-item>智慧医院上线啦，手机也能问诊医...</van-swipe-item>
          <van-swipe-item>新增在线问诊功能，专家随时为您服务</van-swipe-item>
          <van-swipe-item>健康档案管理，让您的健康数据更安全</van-swipe-item>
        </van-swipe>
        <van-icon name="arrow" size="12" color="#999" />
      </div>

      <!-- 服务分类 -->
      <div class="service-categories">
        <div class="category-header">
          <div class="category-tabs">
            <div class="tab-item" :class="{ active: activeTab === 'outpatient' }" @click="activeTab = 'outpatient'">
              门诊
            </div>
            <div class="tab-item" :class="{ active: activeTab === 'inpatient' }" @click="activeTab = 'inpatient'">
              住院
            </div>
            <div class="tab-item" :class="{ active: activeTab === 'comprehensive' }"
              @click="activeTab = 'comprehensive'">
              综合
            </div>
          </div>
          <div class="more-btn" @click="showMore">更多</div>
        </div>

        <!-- 服务网格 -->
        <div class="service-grid">
          <div v-for="service in currentServices" :key="service.id" class="grid-item"
            @click="handleServiceClick(service)">
            <div class="grid-icon">
              <van-icon :name="service.icon" size="24" :color="service.color" />
            </div>
            <div class="grid-text">{{ service.name }}</div>
          </div>
        </div>
      </div>

      <!-- 健康资讯 -->
      <div class="health-info">
        <div class="section-title">健康资讯</div>
        <div class="info-card" @click="readArticle">
          <div class="info-content">
            <h3>世界糖尿病日，应该注意什么</h3>
            <p>糖尿病是一种常见的慢性疾病，需要长期管理和控制...</p>
          </div>
          <div class="info-image">
            <van-icon name="photo-o" size="40" color="#e8f4fd" />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activeTabbar" fixed placeholder>
      <van-tabbar-item icon="home-o" to="/home">
        <span>诊疗首页</span>
      </van-tabbar-item>
      <van-tabbar-item icon="cluster-o">
        <span>微官网</span>
      </van-tabbar-item>
      <van-tabbar-item icon="chat-o">
        <span>消息中心</span>
      </van-tabbar-item>
      <van-tabbar-item icon="user-o">
        <span>我的</span>
      </van-tabbar-item>
    </van-tabbar>

    <!-- 智能客服悬浮按钮 -->
    <div class="floating-service" @click="openCustomerService">
      <van-icon name="service-o" size="20" color="#fff" />
      <span>智能客服</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// 响应式数据
const activeTab = ref('outpatient')
const activeTabbar = ref(0)

// 服务数据
const services = {
  outpatient: [
    { id: 1, name: '门诊报告', icon: 'description', color: '#4fc3f7' },
    { id: 2, name: '候诊查询', icon: 'clock-o', color: '#4fc3f7' },
    { id: 3, name: '自助开单', icon: 'edit', color: '#4fc3f7' },
    { id: 4, name: '医技预约', icon: 'calendar-o', color: '#4fc3f7' },
    { id: 5, name: '我的复诊', icon: 'replay', color: '#4fc3f7' },
    { id: 6, name: '自助取号', icon: 'coupon-o', color: '#4fc3f7' },
    { id: 7, name: '门诊导诊单', icon: 'guide-o', color: '#4fc3f7' },
    { id: 8, name: '电子票据', icon: 'certificate', color: '#4fc3f7' }
  ],
  inpatient: [
    { id: 9, name: '住院查询', icon: 'hotel-o', color: '#66bb6a' },
    { id: 10, name: '住院缴费', icon: 'gold-coin-o', color: '#66bb6a' },
    { id: 11, name: '床位信息', icon: 'home-o', color: '#66bb6a' },
    { id: 12, name: '探视预约', icon: 'friends-o', color: '#66bb6a' }
  ],
  comprehensive: [
    { id: 13, name: '健康档案', icon: 'records', color: '#ff7043' },
    { id: 14, name: '体检报告', icon: 'completed', color: '#ff7043' },
    { id: 15, name: '在线问诊', icon: 'chat-o', color: '#ff7043' },
    { id: 16, name: '药品查询', icon: 'bag-o', color: '#ff7043' }
  ]
}

// 计算当前显示的服务
const currentServices = computed(() => {
  return services[activeTab.value] || []
})

// 方法
const goToRegister = () => {
  showToast('跳转到挂号页面')
}

const goToPayment = () => {
  showToast('跳转到缴费页面')
}

const showMore = () => {
  showToast('显示更多服务')
}

const handleServiceClick = (service: any) => {
  // 根据服务ID或名称进行不同的跳转
  if (service.name === '自助开单') {
    router.push('/self-service-notice')
  } else {
    showToast(`点击了${service.name}`)
  }
}

const readArticle = () => {
  showToast('跳转到文章详情')
}

const openCustomerService = () => {
  showToast('打开智能客服')
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 50px;
}

.custom-nav {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

:deep(.van-nav-bar__title) {
  color: white;
  font-weight: 500;
}

:deep(.van-icon) {
  color: white;
}

.content {
  padding: 0 16px;
}

.banner {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  border-radius: 12px;
  padding: 20px;
  margin: 16px 0;
  color: white;
}

.banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-text h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.quick-services {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.service-item {
  flex: 1;
  background: #4285f4;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  cursor: pointer;
}

.service-item.payment {
  background: #4ecdc4;
}

.service-text {
  flex: 1;
}

.service-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.service-desc {
  font-size: 12px;
  opacity: 0.8;
}

.notice {
  background: white;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.notice-swipe {
  flex: 1;
  height: 20px;
}

:deep(.van-swipe-item) {
  font-size: 14px;
  color: #666;
  line-height: 20px;
}

.service-categories {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.category-tabs {
  display: flex;
  gap: 24px;
}

.tab-item {
  font-size: 16px;
  color: #999;
  cursor: pointer;
  position: relative;
  padding-bottom: 8px;
}

.tab-item.active {
  color: #333;
  font-weight: 500;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #4285f4;
  border-radius: 1px;
}

.more-btn {
  color: #999;
  font-size: 14px;
  cursor: pointer;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  cursor: pointer;
}

.grid-icon {
  width: 48px;
  height: 48px;
  background: #f0f8ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.grid-text {
  font-size: 12px;
  color: #333;
  text-align: center;
}

.health-info {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}

.info-card {
  display: flex;
  gap: 12px;
  cursor: pointer;
}

.info-content {
  flex: 1;
}

.info-content h3 {
  font-size: 14px;
  color: #333;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.info-content p {
  font-size: 12px;
  color: #999;
  margin: 0;
  line-height: 1.4;
}

.info-image {
  width: 60px;
  height: 60px;
  background: #f0f8ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-service {
  position: fixed;
  right: 16px;
  bottom: 80px;
  background: #4285f4;
  color: white;
  padding: 8px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(66, 133, 244, 0.3);
  z-index: 999;
}

:deep(.van-tabbar-item__text) {
  font-size: 10px;
}

:deep(.van-tabbar-item--active) {
  color: #4285f4;
}
</style>
